import React, { useState } from 'react';
// 引入 React 组件
import { HotTable } from '@handsontable/react';
// 菜单汉化配置注册
import { registerLanguageDictionary, zhCN } from 'handsontable/i18n';
// 注册所有模块
import { registerAllModules } from 'handsontable/registry';
import type { PikadayOptions } from 'pikaday';
// 导入样式
import 'handsontable/dist/handsontable.full.min.css';
registerLanguageDictionary(zhCN);
registerAllModules();



const Table: React.FC = () => {
  //内容
  const [hotData] = useState([['1', '2', '3', '', '', '', '', '', '', '']]);
  //表头
  const colHeaders = [
    'A',
    'B',
    'C',
    'D',
    'E',
    'F',
    'G',
    'H',
    'I',
    'J',
  ];

  const rowHeaders = [
    '1',
    '2',
    '3',
    '4',
    '5',
    '6',
    '7',
  ];

  // 日期汉化配置
  const datePickerConfig: PikadayOptions = {
    i18n: {
      previousMonth: '上一月',
      nextMonth: '下一月',
      months: [
        '一月',
        '二月',
        '三月',
        '四月',
        '五月',
        '六月',
        '七月',
        '八月',
        '九月',
        '十月',
        '十一月',
        '十二月',
      ],
      weekdays: ['日', '一', '二', '三', '四', '五', '六'],
      weekdaysShort: ['日', '一', '二', '三', '四', '五', '六'],
    },
  };


  return (
    <div className={'bodyDiv'}>
      <HotTable
        data={hotData}
        colHeaders={colHeaders}
        rowHeaders={rowHeaders}
        undo={true}
        manualColumnResize={true}
        columnSorting={true}
        width="100%"
        height="500"
        // 列宽度均分
        stretchH="all"
        minRows={1}
        minCols={10}
        // 内容居中显示
        className="htCenter"
        copyPaste={{
          pasteMode: 'shift_down',
        }}
        contextMenu={true}
        copyable={true}
        fillHandle={true}
        // 菜单汉化配置
        language={zhCN.languageCode}
        // 日期控件汉化配置
        datePickerConfig={datePickerConfig}
        licenseKey="**********"
      />
    </div>
  )
}
export default Table
